<template>
  <div ref="print">
    <jxf-titletip title="订单详情" :hasGoBack="true" @goBack="$emit('goBack')" ref="noPrint" class="no-print" @refreshPage="$emit('freshDetail')"></jxf-titletip>
    <el-steps :active="orderInfo && orderInfo.stepInfo ? orderInfo.stepInfo.status : 1" align-center class="orderStep jxf-Step">
      <el-step :title="info.title" :description="info.dateTime" v-for="(info, index) in orderInfo && orderInfo.stepInfo ? orderInfo.stepInfo.info : []" :key="index" icon="el-icon-circle-check"></el-step>
    </el-steps>
    <!-- 状态信息 -->
    <el-card class="jxf-table-card mt20">
      <div slot="header">
        <span>当前订单状态：{{title}}</span>
        <div>
          <el-button type="primary" @click="printPage" ref="noBtn1Print" class="no-print">打印</el-button>
          <!--<el-button type="primary" @click="" ref="noBtn2Print" class="noPrint">导出</el-button>-->
        </div>
      </div>
    </el-card>
    <!-- 具体表格 -->
    <el-card class="jxf-table-card mt20">
      <div slot="header">
        <span>基本信息</span>
      </div>
      <jxf-table :table="basicTable1">
        <template slot="orderType" slot-scope="orderList">
          <div>{{orderList.row.orderType === 0 ? "普通订单" : "直通订单"}}</div>
        </template>
      </jxf-table>
      <jxf-table :table="basicTable2" style="margin-top: -1px;"></jxf-table>
    </el-card>
    <el-card class="jxf-table-card mt20" v-show="dataInfo.status == 6 || dataInfo.status == 7 || dataInfo.status == 8 || dataInfo.status == 9 || dataInfo.status == 10 || dataInfo.status == 11">
      <div slot="header">
        <span>关闭信息</span>
      </div>
      <jxf-table :table="shutDownTable"></jxf-table>
    </el-card>
    <el-card class="jxf-table-card mt20">
      <div slot="header">
        <span class="warn-content" v-if="dataInfo.deliveryType != 1"><i class="el-icon-document"></i> 收货人信息</span>
        <span class="warn-content" v-else><i class="el-icon-document"></i> 提货人信息</span>
      </div>
      <jxf-table :table="receiverTable"></jxf-table>
    </el-card>
    <el-card class="jxf-table-card mt20" v-show="dataInfo.status == 4 || dataInfo.status == 0 || dataInfo.status == 1 ">
      <div slot="header">
        <span>发货人信息</span>
      </div>
      <jxf-table :table="shipTable"></jxf-table>
    </el-card>
    <el-card class="jxf-table-card mt20" v-show="dataInfo.status == 4 || dataInfo.status == 0 || dataInfo.status == 1 ">
      <div slot="header">
        <span>物流信息</span>
      </div>
      <jxf-table :table="logisticsTable"></jxf-table>
    </el-card>
    <el-card class="jxf-table-card mt20">
      <div slot="header">
        <span>商品信息</span>
      </div>
      <jxf-table :table="productTable">
        <template slot="picUrl" slot-scope="order">
          <viewer :images="order.row.picUrl ? order.row.picUrl.split(',') : []">
            <div><img :src="order.row.picUrl"></div>
          </viewer>
        </template>
        <template slot="attributes" slot-scope="order">
          <div>品牌：{{order.row.brand}}</div>
          <div>产地：{{order.row.productAddress ? order.row.productAddress : ""}}</div>
        </template>
        <template slot="priceInfo" slot-scope="order">
          <div>价格：{{order.row.price ? formatMoney.twoDecimal(order.row.price) : '0.00'}}</div>
          <div>sku：{{order.row.skuCode ? order.row.skuCode : ""}}</div>
        </template>
        <template slot="totalAmount" slot-scope="order">
          <div>{{order.row.totalAmount ? formatMoney.twoDecimal(order.row.totalAmount) : '0.00'}}</div>
        </template>
        <template slot="productName" slot-scope="order">
          <div>销售名称: {{order.row.productName}}</div>
          <div>标准名称: {{order.row.standardName}}</div>
        </template>
      </jxf-table>
    </el-card>
    <el-card class="jxf-table-card mt20 mb20 orderBottom">
      <div>
        <p>订单总金额：<span class="c-base ml20">￥{{dataInfo.orderAmount ? formatMoney.twoDecimal(dataInfo.orderAmount) : '0.00'}}</span></p><br/>
        <p>信息费：<span class="c-base ml20 c-red">￥{{dataInfo.infoFee ? formatMoney.twoDecimal(dataInfo.infoFee) : '0.00'}}</span></p>
      </div>
    </el-card>
  </div>
</template>

<script>
  import FormatDate from '@/assets/js/formatDate'
  import formatMoney from '@/assets/js/formatMoney'
    export default {
        name: "OrderDetail",
        props: {
          title: {
            type: String,
            default: "订单详情"
          },
          orderInfo: {
            type: Object,
            default: () => {}
          },
          dataInfo: {
            type: Object,
            default: () => {}
          }
        },
        data() {
          return {
            FormatDate: FormatDate,
            formatMoney: formatMoney,
            basicTable1: {},
            basicTable2: {},
            shipTable: {},
            shutDownTable: {},
            logisticsTable: {},
            receiverTable: {},
            productTable: {},
            isShowOrderLog:false,
            isShowTakeOrder:false
          }
        },
        methods: {
          // 打印页面
          printPage() {
            this.$print(this.$refs.print);
          },
          initTable() {
            this.basicTable1 = {
              headerStyle:{background:'#f9f9f9'},
              border: true,
              loading: false,
              hasOperation: true,
              tr: [
                {
                  id: '1',
                  label: '订单号',
                  width: '200',
                  prop: 'orderNo'
                }, {
                  id: '2',
                  width: '200',
                  label: '下单时间',
                  prop: 'orderTime'
                }, {
                  id: '3',
                  width: '200',
                  label: '采购商企业名称',
                  prop: 'merchantName'
                }, {
                  id: '4',
                  width: '160',
                  label: '下单人名称',
                  prop: 'createName'
                }, {
                  id: '5',
                  width: '160',
                  label: '下单人账号',
                  prop: 'account'
                }, {
                  id: '6',
                  width: '160',
                  label: '订单类型',
                  show: 'template',
                  prop: 'orderType'
                }, {
                  id: '7',
                  label: '配送方式',
                  prop: 'deliveryType'
                }
              ],
              operation: [],
              data: [{
                orderNo: this.dataInfo.orderNo,
                orderTime: this.dataInfo.orderTime ? FormatDate.timeFormat(this.dataInfo.orderTime) : "",
                orderType: this.dataInfo.orderType,
                account: this.dataInfo.account,
                merchantName: this.dataInfo.merchantName,
                createName: this.dataInfo.createName,
                deliveryType: this.dataInfo.deliveryType === 0 ? "商家配送" : this.dataInfo.deliveryType === 1 ? "自提" : "甩单"
              }]
            };
            this.basicTable2 = {
              headerStyle:{background:'#f9f9f9'},
              border: true,
              loading: false,
              hasOperation: true,
              tr: [
                {
                  id: '1',
                  width: '200',
                  label: '供应商企业名称',
                  prop: 'enterpriseName'
                }, {
                  id: '2',
                  width: '200',
                  label: '供应商门店名称',
                  prop: 'shopName'
                }, {
                  id: '3',
                  width: '200',
                  label: '订单金额（元）',
                  prop: 'orderAmount'
                }, {
                  id: '4',
                  width: '160',
                  label: '运费金额（元）',
                  prop: 'freight'
                }, {
                  id: '5',
                  width: '160',
                  label: '订单实际金额（元）',
                  prop: 'payAmount'
                }, {
                  id: '6',
                  width: '160',
                  label: this.dataInfo.deliveryType === 1 ? "自提时间" : '期望送达时间',
                  prop: 'expectTime'
                }, {
                  id: '7',
                  label: '所属分公司',
                  prop: 'cityName'
                }
              ],
              operation: [],
              data: [{
                enterpriseName: this.dataInfo.enterpriseName,
                shopName: this.dataInfo.shopName,
                orderAmount: this.dataInfo.orderAmount,
                freight: this.dataInfo.freight ? formatMoney.twoDecimal(this.dataInfo.freight) : '0.00',
                payAmount: this.dataInfo.payAmount,
                expectTime: this.dataInfo.expectTime ? FormatDate.timeFormat(this.dataInfo.expectTime) : "",
                cityName: this.dataInfo.cityName
              }]
            };
            this.logisticsTable = {
              headerStyle:{background:'#f9f9f9'},
              border: true,
              loading: false,
              tr: [
                {
                  id: '1',
                  label: '配送',
                  prop: 'deliveryType'
                }, {
                  id: '2',
                  label: '价格',
                  prop: 'freightRule'
                }, {
                  id: '3',
                  label: '运费路程',
                  prop: 'distance'
                }, {
                  id: '4',
                  label: '运费金额',
                  prop: 'freight'
                }
              ],
              data: [{
                deliveryType: this.dataInfo.deliveryType === 0 ? "商家配送" : this.dataInfo.deliveryType === 1 ? "自提" : "甩单",
                freightRule: this.dataInfo.freightRule,
                freight: this.dataInfo.freight ? formatMoney.twoDecimal(this.dataInfo.freight) : '0.00',
                distance: this.dataInfo.distance
              }]
            };
            this.shutDownTable = {
              headerStyle:{background:'#f9f9f9'},
              border: true,
              loading: false,
              tr: [
                {
                  id: '1',
                  label: '操作人',
                  prop: 'userName'
                }, {
                  id: '2',
                  label: '关闭原因',
                  prop: 'reason'
                }
              ],
              data: [{
                userName: this.dataInfo.userName,
                reason: this.dataInfo.status === 6
                  ? "供应商取消" : this.dataInfo.status === 7
                    ? "商户取消" : this.dataInfo.status === 8 ? "待发货、退款服务中" : this.dataInfo.status === 9 ? "交易关闭" : this.dataInfo.status === 10 ? "超时取消" : "拒单"
              }]
            };
            this.shipTable = {
              headerStyle:{background:'#f9f9f9'},
              border: true,
              loading: false,
              tr: [
                {
                  id: '1',
                  label: '发货人',
                  prop: 'consignerUserName'
                }, {
                  id: '2',
                  label: '联系方式',
                  prop: 'consignerTel'
                }, {
                  id: '3',
                  label: '发货地址',
                  prop: 'storeAddress'
                }
              ],
              data: [{
                consignerTel: this.dataInfo.consignerTel,
                consignerUserName: this.dataInfo.consignerUserName,
                storeAddress: this.dataInfo.storeAddress
              }]
            };
            this.receiverTable = {
              headerStyle:{background:'#f9f9f9'},
              border: true,
              loading: false,
              tr: [
                {
                  id: '1',
                  label: this.dataInfo.deliveryType != 1 ? '收货人' : "提货人",
                  prop: 'consigneeName'
                }, {
                  id: '2',
                  label: '联系方式',
                  prop: 'consigneeTel'
                }, {
                  id: '3',
                  label: this.dataInfo.deliveryType != 1 ? '收货地址' : "门店地址",
                  prop: 'address'
                }
              ],
              data: [{
                consigneeTel: this.dataInfo.consigneeTel,
                consigneeName: this.dataInfo.consigneeName,
                address: this.dataInfo.address
              }]
            };
            this.productTable = {
              headerStyle:{background:'#f9f9f9'},
              border: true,
              loading: false,
              tr: [
                {
                  id: '1',
                  label: '商品图片',
                  show: 'template',
                  width: '120',
                  prop: 'picUrl'
                }, {
                  id: '2',
                  label: '商品名称',
                  show: 'template',
                  prop: 'productName'
                }, {
                  id: '3',
                  label: '属性资料',
                  show: 'template',
                  prop: 'attributes'
                }, {
                  id: '4',
                  minWidth: '120',
                  label: '价格/sku',
                  show: 'template',
                  prop: 'priceInfo'
                }, {
                  id: '5',
                  label: '规格',
                  prop: 'unit'
                }, {
                  id: '6',
                  label: '下单数',
                  prop: 'placeCount'
                }, {
                  id: '7',
                  label: '发货数',
                  prop: 'deliverCount'
                }, {
                  id: '8',
                  label: '收货数',
                  prop: 'collectCount'
                }, {
                  id: '9',
                  label: '小计',
                  show: 'template',
                  prop: 'totalAmount'
                }
              ],
              data: this.dataInfo.products
            }
          },
        },
        created() {
          this.initTable();
        }
    }
</script>

<style lang="scss" scoped>
.orderBottom {
  padding: 20px;
  background: #f5f7fa;
  text-align: right;
}
img {
  width: 100px;
  height: 100px;
}
</style>
